<!--
 * @Description: 
 * @Author: 邹涵
 * @LastEditTime: 2024-06-20 16:37:37
-->
<template>
  <div>
    <el-dialog
      class="fileSynchronization-detail"
      title="储能信息"
      :visible.sync="dialogVisible"
      width="65%"
      :before-close="cancel"
      @open="open"
      @close="closeDialog"
    >
      <div class="model-view">
        <div class="content-view">
          <div>
            <div>
              <div>
                <TitleLook :title="'预期成效'"> </TitleLook>
              </div>
              <div>
                <el-form
                  :inline="true"
                  class="demo-form-inline"
                  style="text-align: right"
                >
                  <el-form-item label="时间选择:">
                    <el-date-picker
                      v-model="value3"
                      type="year"
                      placeholder="选择年"
                      size="mini"
                    >
                    </el-date-picker>
                  </el-form-item>
                  <el-form-item label="路线:">
                    <span>跑马山1N08线</span>
                    <!-- <el-select v-model="value" placeholder="请选择" size="mini">
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select> -->
                  </el-form-item>
                </el-form>

                <div class="underTitle2" style="height: 85%">
                  <div v-for="item in bianInfo" :key="item.index">
                    <el-image
                      style="
                        width: 50px;
                        height: 50px;
                        position: relative;
                        border-radius: 10px;
                      "
                      :src="item.src"
                      fit="fill"
                    ></el-image>

                    <div
                      style="
                        display: flex;
                        flex-direction: column;
                        width: 35%;
                        justify-content: center;
                      "
                    >
                      <div class="child_right">
                        <span :class="item.class">{{ item.name }}</span>
                      </div>

                      <div class="child_right" style="color: rgb(76, 197, 176)">
                        <span :class="item.class">{{ item.value }}</span>
                        <span :class="item.class">{{ item.dw }}</span>
                      </div>
                    </div>

                    <span>同比</span>

                    <span>
                      <el-image
                        style="
                          width: 20px;
                          height: 20px;
                          position: relative;
                          border-radius: 10px;
                        "
                        :src="item.arrow"
                        fit="fill"
                      ></el-image>
                    </span>

                    <span>{{ item.percent }}</span>
                  </div>
                </div>
              </div>
              <div>
                <el-alert
                  show-icon
                  title="通过配置储能，预期将实现年度收益同比增加20%，年平均新能源占比同比增加12.46%，年高负载率天数同比降低53.13%的优化调整。"
                  type="success"
                  :closable="false"
                >
                </el-alert>
              </div>
            </div>

            <div>
              <div>
                <div>
                  <TitleLook :title="'新能源占比对比'"> </TitleLook>
                  <div
                    id="vre7"
                    style="width: 100%; height: 90%"
                    ref="vre7"
                  ></div>
                </div>

                <div>
                  <TitleLook :title="'高负载率天数对比'"> </TitleLook>
                  <div
                    id="vre6"
                    style="width: 100%; height: 90%"
                    ref="vre6"
                  ></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { init } from "echarts";
import { detailData, zhibiaoInfo, bianInfo } from "../data";
export default {
  name: "add",
  props: {
    dialogVisible: {
      type: Boolean,
      default: () => false,
    },
    diglogObj: {
      type: Object,
      default: () => {},
    },
    title: {
      type: String,
      default: "",
    },
    typeStr: {
      type: String,
      default: "",
    },
  },
  components: {},
  data() {
    return {
      value3: new Date().toISOString().substr(0, 4),
      detailData: detailData,
      zhibiaoInfo: zhibiaoInfo,
      bianInfo: bianInfo,
    };
  },
  mounted() {
    console.log(this.$refs, "8888888");
  },
  methods: {
    /**
     * @Description: 打开dialog
     * @Author: 赵程成
     */
    open() {
      // this.queryData();
      this.$nextTick(() => {
        this.initEchart3();
        this.initEchart2();
      });
    },

    initEchart2() {
      let rq = [1, 2, 3, 4, 5];
      let seriesArr = [];
      let list = [
        {
          name: "配置前",
          children: [28.23, 29.34, 33.42, 36.21, 37.19],
        },
        {
          name: "配置后",
          children: [41.74, 40.12, 45.76, 49.21, 48.84],
        },
      ];
      let colorArr = ["0, 62, 246", "0, 193, 142", "253, 148, 67"];

      list.forEach((val, index) => {
        seriesArr.push({
          name: val.name,
          type: "line",
          symbolSize: 6,
          data: val.children,
          areaStyle: {
            normal: {
              color: this.$echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: `rgba(${colorArr[index]},.2)`,
                  },
                  {
                    offset: 1,
                    color: "rgba(255, 255, 255,0)",
                  },
                ],
                false
              ),
            },
          },
          itemStyle: {
            normal: {
              color: `rgb(${colorArr[index]})`,
            },
          },
          lineStyle: {
            normal: {
              width: 2,
              shadowColor: `rgba(${colorArr[index]}, .2)`,
              shadowBlur: 4,
              shadowOffsetY: 25,
            },
          },
        });
      });

      let myChart = this.$echarts.init(document.getElementById("vre7"));
      let option = {
        backgroundColor: "#fff",
        tooltip: {
          trigger: "axis",
          axisPointer: {
            lineStyle: {
              color: "#ddd",
            },
          },
          backgroundColor: "rgba(255,255,255,1)",
          padding: [5, 10],
          textStyle: {
            color: "#000",
          },
        },
        legend: {
          // right: "center",
          top: "6%",
          left: "15%",
          textStyle: {
            color: "#000",
            fontSize: 12,
            // fontWeight: 600
          },
          data: list.map((val) => {
            return val.name;
          }),
        },
        grid: {
          left: "2%",
          right: "5%",
          bottom: "6%",
          top: "18%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: [
            "2024年1月",
            "2024年2月",
            "2024年3月",
            "2024年4月",
            "2024年5月",
          ],
          boundaryGap: false,
          splitLine: {
            show: true,
            interval: "auto",
            lineStyle: {
              type: "dashed",
              color: ["#cfcfcf"],
            },
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "#cfcfcf",
            },
          },
          axisLabel: {
            // margin: 10,
            textStyle: {
              fontSize: 12,
              color: "#9e9d9f",
              fontWeight: 600,
            },
          },
        },
        yAxis: [
          {
            name: "(%)",
            type: "value",
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed",
                color: ["#cfcfcf"],
              },
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                fontSize: 12,
                color: "#cfcfcf",
              },
            },
            axisLabel: {
              textStyle: {
                fontSize: 12,
                color: "#9e9d9f",
                fontWeight: 600,
              },
            },
            max: 100,
          },
        ],
        series: seriesArr,
      };
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },

    initEchart3() {
      let myChart = this.$echarts.init(document.getElementById("vre6"));
      let option = {
        backgroundColor: "#fff",
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          left: "2%",
          right: "4%",
          bottom: "10%",
          top: "20%",
          containLabel: true,
        },
        legend: {
          data: ["配置前", "配置后"],
          top: "8%",
          textStyle: {
            // color: "#fff",
            fontSize: 16,
          },
          itemWidth: 12,
          itemHeight: 10,
          // itemGap: 35
        },
        xAxis: {
          type: "category",
          data: [
            "2024年1月",
            "2024年2月",
            "2024年3月",
            "2024年4月",
            "2024年5月",
          ],
          axisLine: {
            lineStyle: {
              color: "#8c9493",
            },
          },
          axisLabel: {
            // interval: 0,
            // rotate: 40,
            textStyle: {
              fontFamily: "Microsoft YaHei",
              // fontWeight: 600,
              fontSize: 14,
            },
          },
        },

        yAxis: {
          name: "天",
          nameTextStyle: {
            // color: "#fff"
          },
          type: "value",
          axisLine: {
            show: true,
            lineStyle: {
              // color: '#8c9493'
            },
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: "#8c9493",
            },
          },
          axisLabel: {
            textStyle: {
              // fontWeight: 600
            },
          },
        },
        series: [
          {
            name: "配置前",
            type: "bar",
            barWidth: "25%",
            itemStyle: {
              normal: {
                color: "rgb(177,221,168)",
              },
            },
            data: [8, 9, 3, 5, 7],
          },
          {
            name: "配置后",
            type: "bar",
            barWidth: "25%",
            itemStyle: {
              normal: {
                color: "rgb(76,197,176)",
              },
            },
            data: [3, 5, 2, 3, 2],
          },
        ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    /**
     * @Description: 关闭dialog
     * @Author: 赵程成
     */
    closeDialog() {
      this.detailObj = null;
      this.queryLoading = true;
    },
    /**
     * @Description: 查询接口
     * @Author: 赵程成
     */
    //   queryData(obj, str) {
    //     this.queryLoading = true;
    //     this.tableDataLoading = true;
    //     let data = {
    //       dadx: str,
    //       ...obj,
    //     };
    //     queryBaseInfo(data)
    //       .then((res) => {
    //         if (res.data.code === 200) {
    //           this.detailList = tabledetail[str];
    //           this.tableOtherDetailList = tableOtherDetail[str];
    //           this.tableZCDetailList = tableZCDetail[str];
    //           this.detailObj = res.data.data;
    //           this.descriptionsKey++;
    //         }
    //         this.queryLoading = false;
    //         this.tableDataLoading = false;
    //       })
    //       .catch((err) => {
    //         console.log(err);
    //         this.queryLoading = false;
    //         this.tableDataLoading = false;
    //       });
    //   },
    resetForm() {
      this.$refs["form"].resetFields();
    },
    cancel() {
      this.$emit("update:dialogVisible", false);
    },
    handleSizeChange(e) {
      this.queryForm.pageNum = 1;
      this.queryForm.pageSize = e;
      this.queryData();
    },
    handleCurrentChange(e) {
      this.queryForm.pageNum = e;
      this.queryData();
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-descriptions .descriptions-view .descriptions-item-content {
  width: 30%;
}

::v-deep .el-descriptions .descriptions-view .descriptions-row > td {
  padding-bottom: 5px !important;
}

::v-deep .el-descriptions .descriptions-view .descriptions-row > th {
  padding-bottom: 5px !important;
}

::v-deep .el-button--medium {
  padding: 0px;
}
LS {
  word-break: keep-all;
}

CS {
  max-width: 300px;
  word-break: keep-all;
}

.el-dropdown-link {
  cursor: pointer;
  color: #3c6cfe;
}
.operate-btn {
  padding-left: 20px;
}
.el-input {
  width: fit-content;
}
.query-table {
  height: calc(100% - 102px);
}
.query-pagination {
  margin-top: 20px;
  text-align: right;
}
.fileSynchronization-detail {
  ::v-deep .el-title {
    margin-bottom: 24px !important;
  }
  ::v-deep .el-dialog__body {
    height: calc(100% - 170px);
    // max-height: 425px;
    overflow: auto;
    padding: 0 24px !important;
    .dialog-content {
      // 时间范围宽度
      ::v-deep .el-range-editor--small {
        width: 100%;
      }
      ::v-deep .el-date-editor--date {
        width: 100%;
      }
    }
  }
}
.model-view {
  width: 100%;
  height: 100%;

  overflow-y: auto;
  // border-bottom: 1px solid #eee;

  .title-view {
    display: flex;
    align-items: center;
    .title-line {
      width: 4px;
      height: 16px;
      background: #3c6cfe;
      margin-right: 8px;
    }
  }

  .child_right {
    // @include child_left;
    width: 100%;
    height: 30%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: baseline;
    // margin-top: 20%;
  }

  .underTitle2 {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-content: center;
    flex-wrap: wrap;

    > div:nth-child(n) {
      width: 40%;
      height: 80%;
      display: flex;
      background: rgb(245, 245, 245);
      border-radius: 10px;
      justify-content: space-around;
      align-items: center;
      // margin: 1%;
      // margin-left: 3%;
    }
    // > div:nth-child(2) {
    //   width: 69%;
    //   height: 100%;
    // }
  }

  .underTitle {
    width: 100%;
    height: 90%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-content: center;
  }

  .child_left1 {
    height: 80%;
    width: 25%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("@/assets/images/sjcdwl/本月充电总量.png");
  }

  .content-view {
    padding-bottom: 24px;
    > div:nth-child(1) {
      height: 500px;
      display: flex;
      flex-direction: column;
      > div:nth-child(1) {
        height: 40%;
        width: 100%;
        display: flex;
        flex-direction: column;
        > div:nth-child(1) {
          height: 20%;
          width: 100%;
        }
        > div:nth-child(2) {
          height: 60%;
          width: 90%;
          display: flex;
          flex-direction: column;
          margin: 0 auto;
          justify-content: space-around;
          > div:nth-child(1) {
            height: 40%;
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: end;
            > div:nth-child(n) {
              width: 20%;
              height: 100%;
              margin-left: 2%;
            }
          }
        }
        > div:nth-child(3) {
          height: 20%;
          width: 90%;
          display: flex;
          margin: 0 auto;
        }
      }
      > div:nth-child(2) {
        height: 60%;
        width: 100%;
        display: flex;
        flex-direction: column;
        > div:nth-child(1) {
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: row;
          > div:nth-child(1) {
            width: 50%;
            height: 100%;
          }
          > div:nth-child(2) {
            width: 50%;
            height: 100%;
          }
        }
      }
    }
  }
}

:deep .el-form-item {
  margin-bottom: 0 !important;
}
</style>
